<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成功界面</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js "></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h1 style="text-align: center">您的文件页面</h1><br/>
<!-- 数据表格开始 -->
<div style="width: 80%;margin-left: 100px">
    <!-- 表格 -->
    <table class="layui-hide" id="billTable" lay-filter="billTable"></table>

    <!-- 行工具栏 -->
    <script type="text/html" id="billRowBar">
        <button class="layui-btn layui-btn-xs" lay-event="edit">更名</button>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="download">下载</a>
<!--        <button class="layui-btn layui-btn-xs" lay-event="download">下载</button>-->
        <button class="layui-btn layui-btn-xs" lay-event="delete">删除</button>
    </script>
</div>
<!-- 数据表格结束 -->
<!-- 添加和修改账单的弹出层开始 -->
<div id="addOrUpdateBillDiv" style="display: none;margin: 10px">
    <form id="dataFrm" method="post" class="layui-form  layui-form-pane" lay-filter="dataFrm">
        <!-- 隐藏域，保存当前账单的ID -->
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">文件名称</label>
            <div class="layui-input-block" id="billTypeDiv">
                <input type="text" name="filename" placeholder="请输入文件名称" lay-verify="required" lay-reqText="请输入文件名称"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文件路径</label>
            <div class="layui-input-block">
                <input type="text" name="filepath" placeholder="请输入文件路径" lay-verify="required" lay-reqText="请输入文件路径"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
<!-- 添加和修改账单的弹出层结束-->
<script>
    layui.use(['form','jquery','table','laydate','layer'],function () {
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;

        //渲染表格组件
        var tableIns = table.render({
            elem:"#billTable",//绑定表格元素，推荐使用ID选择器
            url:"list",//异步请求地址,加入分页后，默认使用page(当前页码)和limit(每页显示数量)作为参数名称
            page:true,//开启分页
            cols: [[ //表头
                {field: 'id', title: '文件编号',align:"center"}
                ,{field: 'username', title: '用户名称',align:"center"}
                ,{field: 'filename', title: '文件名称',align:"center"}
                ,{field: 'filepath', title: '文件路径',align:"center"}
                ,{title:"操作",toolbar: "#billRowBar",align:"center"}
            ]]
        });

        //监听表格行工具栏事件
        table.on("tool(billTable)",function (obj) {
            switch (obj.event) {
                //编辑
                case 'edit':
                    openUpdateWindow(obj.data);
                    break;
                //下载
                case 'download':
                    downfile(obj.data);
                    break;
                //删除
                    case 'delete':
                    deletefile(obj.data);
                    break;

            }
        });
        var url;//提交地址
        var mainIndex;//窗口索引
        /**
         * 打开编辑窗口
         */
        function openUpdateWindow(data) {
            console.log(data.filename);
            var oldname = data.filename;
            mainIndex =layer.open({
                type:1,//弹出层类型
                title:"修改文件名称",
                area: ['800px', '600px'],
                content:$("#addOrUpdateBillDiv"),//引用的窗口代码
                success:function () {
                    //表单数据回显
                    form.val("dataFrm",data);
                    //修改请求
                    url = 'updatefile?oldname='+oldname
                    // window.location.href='updatefile?filename=' + data.filename

                }
            });
        }

        /**
         * 文件下载
         * @param data  当前行数据
         */
        function downfile(data) {
                //发送ajax请求
            //console.log(data);
               window.location.href='download?filename=' + data.filename
        }

        /**
         * 删除客户
         * @param data  当前行数据
         */
        function deletefile(data) {
            //提示用户确认是否删除
            layer.confirm("确定要删除编号为[<font color='red'>"+data.id+"</font>]文件吗？",{icon:3,title:"提示"},function (index) {
                //发送ajax请求,"filename":data.filename,"filepath":data.filepath]
                $.post("deletefile",{"id":data.id,"filename":data.filename,"filepath":data.filepath},function(result){
                    if(result.success){
                        layer.alert(result.message,{icon:1});
                        //刷新数据表格
                        tableIns.reload();
                    }else{
                        layer.alert(result.message,{icon:2});
                    }
                },"json");

                //关闭提示框
                layer.close(index);
            });
        }






        //监听表单提交事件
        form.on("submit(doSubmit)",function (data) {
            $.post(url,data.field,function(result){
                if(result.success){
                    layer.alert(result.message,{icon:1});
                    //关闭窗口
                    layer.close(mainIndex);
                    layer.close(mainIndex);
                    //刷新数据表格
                    tableIns.reload();
                }else{
                    layer.alert(result.message,{icon:2});
                }
            },"json");
            return false;
        });
    });

</script>
</body>
</html>